<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论</title>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <script src="../lib/jquery.js"></script>
</head>

<body style="padding: 15px;">

    <!-- 评论面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAddCmt">
            <div>评论人：</div>
            <input type="text" class="form-control" name="username" autocomplete="off" />
            <div>评论内容：</div>
            <textarea class="form-control" name="content"></textarea>

            <button type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>


    <!-- 评论列表 -->
    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
            <span class="badge" style="background-color: #5BC0DE;">评论人：</span>
            评论区
        </li>

    </ul>
    <script>
        function getCommentList() {
            $.ajax({
                method: 'get',
                url: 'http://www.liulongbin.top:3006/api/cmtlist',
                success: function (res) {
                    if (res.status !== 200) return alert('获取评论列表失败！')
                    var rows = []
                    $.each(res.data, function (i, item) {
                        var str =
                            '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：' +
                            item.time +
                            '</span><span class="badge" style="background-color: #5BC0DE;">评论人：' +
                            item.username + '</span>' + item.content + '</li>'
                        rows.push(str)
                    })
                    $('#cmt-list').empty().append(rows.join(''))
                }
            })

        }

         getCommentList();
         $(function(){
             $('#formAddCmt').on("submit",function(e){
                e.preventDefault();
                var data=$(this).serialize();
                $.post('http://www.liulongbin.top:3006/api/addcmt',data,function(res){
                    if (res.status !== 201) return alert('发表评论失败！')
                    getCommentList();
                    $('#formAddCmt')[0].reset();//调用表单自身的reset函数
                })
             })
         })
    </script>
</body>

</html>